/*
 * @Author: mikey.zhaopeng
 * @Date:   2016-05-25 19:50:35
 * @Last Modified by:   mikey.zhaopeng
 * @Last Modified time: 2016-07-13 16:16:48
 */

'use strict';
define([
    '../../../framework/base/baseView',
    './previewDialog',
    './saveDialog',
    '../adPreview/desktopfeed',
    '../adPreview/instagramstream',
    '../adPreview/mobileexternal',
    '../adPreview/mobilefeed',
    '../adPreview/rightcolumn',
    'text!../tpl/step3.html'
], function(
    BaseView,
    PreviewDialogView,
    SaveDialogView,
    DesktopfeedView,
    InstagramstreamView,
    MobileexternalView,
    MobilefeedView,
    RightcolumnView,
    tpl
) {
    function me() {
        BaseView.apply(this, arguments);
        var self = this;
        /**
         * [init description]
         * @param  {[type]} $root    [description]
         * @param  {[type]} jumpStep [description]
         * @param  {[type]} restore  [是否从缓存恢复]
         * @return {[type]}          [description]
         */
        this.init = function($root, jumpStep, restore) {
            jumpStep(3);
            self.previewImg = self.kit.getCache('createMaterialStep2', 'imageUrl'); //预览图片
            self.$root = $root;
            self.adPreview = {};
            self.adPreview.desktopfeed = new DesktopfeedView();
            self.adPreview.instagramstream = new InstagramstreamView();
            self.adPreview.mobileexternal = new MobileexternalView();
            self.adPreview.mobilefeed = new MobilefeedView();
            self.adPreview.rightcolumn = new RightcolumnView();
            self.render();
        }

        this.render = function() {
            self.$root.html(I18N.parse(tpl,'createMaterial'));
            self.renderSwitchPreview()
            self.event();
            self.$root.find('.switch-preview a.list-group-item:first').trigger('click');
        }


        this.event = function() {
            self.$root.find('.btn-preview').off('click').on('click', $.proxy(self.openPreviewDialog, self));
            self.$root.find('.btn-save').off('click').on('click', $.proxy(self.openSaveDialog, self));
            self.$root.find('.switch-preview a.list-group-item').off('click').on('click', $.proxy(self.switchPreview, self));
        }

        /**
         * [renderSwitchPreview 渲染切换预览的部分，需要从第一步缓存中获取版位数据]
         * @return {[type]} [description]
         */
        this.renderSwitchPreview = function() {
            var icons = {
                desktopfeed: 'font-icon font-icon-pc',
                mobilefeed: 'font-icon font-icon-iphone',
                rightcolumn: 'font-icon font-icon-banner',
                mobileexternal: 'font-icon font-icon-facebook',
                instagramstream: 'font-icon font-icon-instagram'
            }
            var t = '            <a href="javascript:void(0)" class="list-group-item" data-type="<%=d.categoryType%>">' +
                '                        <span class="preview-icon"><i class="fa <%=d.icon%>" aria-hidden="true"></i> </span> <%=d.title%>' +
                '                  </a>';
            var options = self.kit.getCache('createMaterialStep1', 'options'); //!!!!!!!!要和 step1.js 中的存储保持一直！
            var adPlaceMent = options['adPlaceMent'];
            console.log(adPlaceMent)
            var $preview = self.$root.find('.switch-preview');
            $preview.empty();
            _.each(adPlaceMent, function(adplace) {
                if (adplace.checked) {
                    adplace.icon = icons[adplace.categoryType];
                    var html = _.template(t)({
                        d: adplace
                    });
                    $preview.append(html);
                }
            });
        }


        this.openSaveDialog = function(e) {
            var dialogParams = {
                previewImg: self.previewImg,
                editType: 'create'
            }
            new SaveDialogView().init($.proxy(self.saveOK, self), dialogParams); //创建
        }

        this.openPreviewDialog = function(e) {
            new PreviewDialogView().init(null, 'create');
        }

        this.switchPreview = function(e) {
            self.$root.find('.switch-preview a.list-group-item').removeClass('active');
            var $activeDom = $(e.currentTarget);
            $activeDom.addClass('active');
            var type = $activeDom.data('type');
            self.adPreview[type].init(self.$root.find('.ad-preview'), self.previewImg);
        }

        /**
         * [saveOK 保持成功]
         * @return {[type]} [description]
         */
        this.saveOK = function() {
            //清空缓存
            window.localStorage.removeItem('createMaterialJumpStep');
            window.localStorage.removeItem('createMaterialStep1');
            window.localStorage.removeItem('createMaterialStep2');
            setTimeout(function() {
                window.top.location.hash = '#!materialTemplate';
            });
        }


        this.i18n = function(key) {
            return I18N.getText('createMaterial', key)
        }
    }
    return me;
});